<!DOCTYPE HTML>
<html class="x-admin-sm">
<head>
  <th:block th:insert="head/head :: common_head"></th:block>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input class="layui-input"  autocomplete="off" placeholder="请输入表名或原文件名" name="cxmc" id="cxmc">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn btn-query37" lay-event="query"><i class="layui-icon">&#xe615;</i></button>
            </div>
          </form>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">
          <table class="layui-table layui-form" id="query_tb" lay-filter="query_tb"></table>
          <div id="laypage"></div>
        </div>
      </div>
    </div>
  </div>
</div>

  <th:block th:insert="head/head :: common_jsfiles"></th:block>
  <script>
    /**
     * sessionStorage的时候，cxtj_session 这个参数名称，每个页面不要重复，用于缓存查询条件的值，返回页面时候需要
     * 查询页面逻辑：query_data调用post_json_table(url+"query","","数据加载中...",renderTable)
     *
     */
    //后端地址
    var url = "[[${serverUrl}]]/sys/drpc/";
    //每页默认大小
    var pagesize = 10;
    //当前第几页
    var curpage = 1;
    //查询条件缓存的键值名称
    var cxtj_session="t_drpc_cxtj";
    //界面渲染
    layui.use(['table','laypage','form'], function(){
      var table = layui.table,
              form = layui.form,
              laypage = layui.laypage;

      //渲染table
      var renderTable = function(tbData){
        console.info("tbData:"+JSON.stringify(tbData));
        table.render({
          data: tbData.cxjg.listInfo,
          defaultToolbar: ['filter'],
          toolbar: ['<p>',
            '<button lay-event="del" class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i>删除</button>',
            '</p>'].join(''),
          elem: '#query_tb',
          height: 'full-173',
          page:false,
          limit: pagesize,
          even: true,
          cols: [
            [
              {field:'checkbox',align: 'center',width:'5%',title:'<input type=\'checkbox\' name=\'siam_all\' title=\'\' lay-skin=\'primary\' lay-filter=\'ck_all\'>',templet:function (d){
                  if (d.czyId == tbData.cxjg.userId) {
                    if (d.state=="0") return "";
                    else return '<input type="checkbox" name="ck_id" value="'+d.id+'" lay-skin="primary" title=" ">';
                  } else {
                    return "";
                  }
                }},
              {field: 'id', title: '导入批次',width:'5%'},
              {field: 'drrq', title: '导入日期',width:'7%'},
              {field: 'ywjm', title: '原文件名',width:'7%'},
              {field: 'ywms', title: '表名',width:'5%'},
              {field: 'drts', title: '导入条数',width:'5%'},
              {field: 'state', title: '是否删除',width:'5%',templet(d){
                  if (d.state=="0") return "<span style='color: red'>已删除</span>";
                  else return  "<span style='color: green'>正常</span>";
                }},
              {field: 'drzt', title: '操作状态',width:'5%',templet(d){
                  if (d.drzt=="0") return "<span style='color: red'>导入失败</span>";
                  else if (d.drzt=="1") return "<span style='color: green'>导入成功</span>";
                  else if (d.drzt=="2") return  "<span style='color: blue'>导入中</span>";
                }},
              {field: 'drwcsj', title: '导入完成时间',width:'5%'},
              {field: 'drbz', title: '导入备注',width:'20%'},
              {field: 'scbz', title: '删除备注',width:'20%'},
              {field: 'id',title: '操作', align: 'center',templet(d){
                  if (d.czyId==tbData.cxjg.userId){
                    if (d.state=="0")
                      return "    <button type=\"button\" class=\"layui-btn layui-btn-disabled\"><i class=\"layui-icon layui-icon-delete\"></i>删除</button>";
                    else
                      return "    <button type=\"button\" class=\"layui-btn layui-btn-danger\" lay-event=\"del\"><i class=\"layui-icon layui-icon-delete\"></i>删除</button>";

                  }else{
                    return "    <button type=\"button\" class=\"layui-btn layui-btn-disabled\"><i class=\"layui-icon layui-icon-delete\"></i>删除</button>";
                  }

                }}
            ]
          ],
          done: function(res, curr, count){
            var zsl=0;
            if (!is_null(tbData.cxjg.pageInfo)) zsl = tbData.cxjg.pageInfo.total;
            //执行一个laypage实例
            laypage.render({
              elem:'laypage'
              ,count:zsl
              ,curr:curpage
              ,limit:pagesize
              ,limits: [10, 20, 30, 40]
              ,layout: ['prev', 'page', 'next', 'skip','count','limit']
              ,jump:function (obj,first) {
                if(!first){
                  curpage = obj.curr;
                  pagesize = obj.limit;
                  query_data();
                }
              }
            });
            //渲染提示？
          }
        });
      }

      /* 表格内容里面的工具条点击事件 */
      table.on('tool(query_tb)', function (obj) {
        if ('edit' === obj.event) {
          set_query_json();
          xadmin.goto('修改数据',"info?id="+obj.data.id+"&lx=1");
        } else if ('del' === obj.event) {
          set_query_json();
          do_del(obj);
        }
      });
      table.on('toolbar(query_tb)', function (obj) {
        if ('add' === obj.event) { // 添加
          set_query_json();
          xadmin.goto('添加数据','info?lx=0');
        } else if ('del' === obj.event) {
          set_query_json();
          // /* 表格头部的工具栏点击事件 */
          var ids = "";
          $.each($("input[name=ck_id]:checked"), function (i, value) {
            ids += $(this).attr("value")+",";  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
          });
          if (ids==""){
            return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
          }
          do_del({ids: ids});
        }
      });
      //全选
      form.on("checkbox(ck_all)", function () {
        var status = $(this).prop("checked");
        $.each($("input[name=ck_id]"), function (i, value) {
          $(this).prop("checked", status);
        });
        form.render();
      });
      //数据查询
      function query_data(){
        //如果有缓存，用缓存查询一次，然后清空缓存！
        let str = sessionStorage.getItem(cxtj_session);
        if (!is_null(str)){
          let str_json = JSON.parse(str);
          $("#cxmc").val(str_json.cxmc);
          curpage=str_json.curpage;
          pagesize=str_json.pagesize;
          sessionStorage.setItem(cxtj_session,"");
        }
        //调用查询接口，准备发送的参数
        let jsonData = {
          cxmc: $("#cxmc").val(),
          curpage: curpage,
          pagesize: pagesize,
          timestamp:new Date().getTime()
        };
        //查询参数加密
        let sendStr = {
          data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
        };
        //开始查询
        post_json_table(url+"query",JSON.stringify(sendStr),"数据加载中...",renderTable);
      }

      //监听查询按钮事件
      $(document).on('click', '[lay-event]', function(obj){
        var eventName = $(this).attr('lay-event'); // 获取事件名称
        if(eventName === 'query'){
          curpage=1;
          query_data();
          return false;
        }
      });

      //执行查询
      query_data();

    });
    //重置密码
    function czmm(id){
      if (id=="") return;
      if (!confirm("确定重置密码？")) return false;
      let jsonData = {
        id:id,
        curpage: curpage,
        pagesize: pagesize,
        timestamp:new Date().getTime()
      };
      //查询参数组织
      let sendStr = {
        data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
      };
      //开始查询
      post_json_token(url+"czmm",JSON.stringify(sendStr),"数据加载中...");
    }
    //保存查询条件到缓存
    function set_query_json(){
      let jsonData = {
        cxmc: $("#cxmc").val(),
        dlmc: $("#dlmc").val(),
        state: $("#state").val(),
        curpage: curpage,
        pagesize: pagesize,
        timestamp:new Date().getTime()
      }
      sessionStorage.setItem(cxtj_session,JSON.stringify(jsonData));
    }
    //删除
    function do_del(obj) {
      var ids;
      if (obj.ids) {  // 批量删除
        ids = obj.ids;
      } else {  // 单个删除
        ids = obj.data.id;
      }
      if(!confirm("导入数据将会全部删除！是否确定删除数据？")) return;
      if(!confirm("确定删除？")) return;
      var jsonData = {
        ids: ids
      };
      var sendStr = {
        data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
      };
      post_json_token(url+"del",JSON.stringify(sendStr),"数据删除中...");
    }
    //回调
    function on_result(result)
    {
      if (result.code==0)
      {
          window.location.reload();
      }
      else if (result.code==9)
      {
        layer.msg(result.msg, { time: 2000 }, function() {
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
      else
      {
        layer.msg(result.msg, { time: 2000 }, function() {
          window.location.reload();
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
    }

  </script>
</body>
</html>